<template>
	<div class="col-md-12 full-style">
		<canvas id="canvas" style="display: block"></canvas>
    </div>
</template>
<script>
	import {rangeMap, randomInt} from 'common/func'
    import {setTitle} from 'common/dom'

	const ERROR_MESSAGE = {
		404: ['page','Not Find'],
		429: ['client','Too Many Requests'],
		500: ['fail', 'Program Run Error'],
		503: ['server', 'Service Unavailable'],
	}

	export default {
		data() {
			return {
				status: 404,
				messages: [],
				min: 5,
				max: 25,
				word: [],
				width: 0,
				height: 0,
				canvas: '',
				keypress: false,
				stop: false,
				offsetTop: 58,
				offsetBottom: 80,
				backgroundColor: "rgba(246,246,246,1)",
				fontColor: "#333"
			}
		},
		created() {
			this.status = this.$route.params.status || 404
			if(!ERROR_MESSAGE[this.status]){
				this.status = 404
			}
			this.status === 404 ? setTitle(this.$title.notFind) : setTitle(this.$title.error)
			this.messages = ERROR_MESSAGE[this.status]
			this.height = (window.innerHeight - this.offsetTop - this.offsetBottom)
			this.width  = window.innerWidth
			let _this = this
			window.addEventListener('keydown',function(){
		        _this.keypress = true;
		    },true);
		    window.addEventListener('keyup',function(){
		        _this.keypress = false;
		    },true);
		},
		mounted() {
			let canvas = document.getElementById('canvas')
			canvas.height = this.height
			canvas.width = this.width
			this.canvas = canvas.getContext("2d")
			this.init()
		},
		methods: {
			init() {
				for (let i = 0; i < this.max; i++) {
					this.word.push({
						x : randomInt(0, this.width),
						y : randomInt(this.offsetTop, this.height),
						text : this.status,
						size : randomInt(this.min, this.max)
					})
					for (let t = 0; t < this.messages.length; t++) {
						this.word.push({
							x : randomInt(0, this.width),
							y : randomInt(this.offsetTop, this.height),
							text : this.messages[t],
							size : randomInt(this.min, this.max)
						})
					}
				}
				this.render()
			},
			render(){
				let acclerate = 2
		        this.canvas.fillStyle = this.backgroundColor
		        this.canvas.fillRect(0, 0, this.width, this.height)
		        this.canvas.fillStyle = this.fontColor
		        for (let i = 0; i < this.word.length; i++) {
		          this.canvas.font = this.word[i].size + "px sans-serif"
		          let w = this.canvas.measureText(this.word[i].text)
		          this.canvas.fillText(this.word[i].text, this.word[i].x, this.word[i].y)
		          if(this.keypress) {
		          	this.word[i].x += rangeMap(this.word[i].size, this.min, this.max, 2, 4) * acclerate
		          } else {
		            this.word[i].x += rangeMap(this.word[i].size,this.min, this.max, 2, 3)
		          }
		          if(this.word[i].x >= this.width) {
		          	this.word[i].x = -w.width * 2
		            this.word[i].y = randomInt(this.offsetTop, this.height)
		            this.word[i].size =  randomInt(this.min, this.max)
		          }
		        }
		        this.canvas.fill()
		       	requestAnimationFrame(this.render.bind(this))
	      	}
		}
	}
</script>

<style lang="scss" scope>
	.full-style {
		position: fixed;
		top: 58px;
		bottom: 80px;
		left: 0;
		padding: 0;
		margin: 0;
	}
</style>